import React, { useState, useEffect } from 'react'
import { Tabs } from 'antd';
import img1 from "../../assets/images/images/img11.png";
import hov_img1 from "../../assets/images/images/img1.png";
import img2 from "../../assets/images/images/img22.png";
import hov_img2 from "../../assets/images/images/img2.png";
import img3 from "../../assets/images/images/img33.png";
import hov_img3 from "../../assets/images/images/img3.png";
import img4 from "../../assets/images/images/img44.png";
import hov_img4 from "../../assets/images/images/img4.png";
import img5 from "../../assets/images/images/img55.png";
import hov_img5 from "../../assets/images/images/img5.png";
import img6 from "../../assets/images/images/img66.png";
import hov_img6 from "../../assets/images/images/img6.png";
import img7 from "../../assets/images/images/img77.png";
import hov_img7 from "../../assets/images/images/img7.png";
import img8 from "../../assets/images/images/img8.png";
import hov_img8 from "../../assets/images/images/img8.png";
import Holidayhottopics from '../Holidayhottopics/Holidayhottopics'
import Characterimage from '../Characterimage/Characterimage'
import style from "./two.module.css";
function Two() {
  //tab标签key值
  const [keys, setKeys] = useState('0')
  //本地存储
  const [defaultActiveKey, setDefaultActiveKey] = useState(localStorage.getItem('activekey1') as string ? localStorage.getItem('activekey1') as string : '0')
  interface items {
    key: string,
    icon: any,
    hovericon: any,
    title: string,
    flag: boolean,
    content: JSX.Element | string;
  }
  const [tabsData, setTabsData] = useState([
    {
      key: '0',
      icon: img1,
      hovericon: hov_img1,
      title: '节日热点',
      flag: false,
      content: <Holidayhottopics />
    },
    {
      key: '1',
      icon: img2,
      hovericon: hov_img2,
      title: '人物形象',
      flag: false,
      content: <Characterimage/>,
    },
    {
      key: '2',
      icon: img3,
      hovericon: hov_img3,
      title: '教育培训',
      flag: false,
      content: <Holidayhottopics />
    },
    {
      key: '3',
      icon: img4,
      hovericon: hov_img4,
      title: '餐饮美食',
      flag: false,
      content: <Holidayhottopics />,
    },
    {
      key: '4',
      icon: img5,
      hovericon: hov_img5,
      title: '贴纸元素',
      flag: false,
      content: <Holidayhottopics />
    },
    {
      key: '5',
      icon: img6,
      hovericon: hov_img6,
      title: '古风元素',
      flag: false,
      content: <Holidayhottopics />
    },
    {
      key: '6',
      icon: img7,
      hovericon: hov_img7,
      title: '社交媒体',
      flag: false,
      content: <Holidayhottopics />
    },
    {
      key: '7',
      icon: img8,
      hovericon: hov_img8,
      title: '立体元素',
      flag: false,
      content: <Holidayhottopics />
    }
  ]);

  const mousemove = (val: items) => {
    // console.log(val, '滑过的val');
    let items1 = [...tabsData]
    items1.forEach((item) => {
      if (item.key == val.key) {
        item.flag = true
      }
      else {
        item.flag = false
      }
    })
    setTabsData(items1)
  }
  //change事件
  const onChange = (key: string) => {
    // console.log(key);
    setKeys(key)
    let items1 = [...tabsData]
    items1.forEach((item) => {
      if (item.key == key) {
        item.flag = true
      }
      else {
        item.flag = false
      }
    })
    setTabsData(items1)
    localStorage.setItem('activekey1', key)
  };
  //
  useEffect(() => {
    let activekey = localStorage.getItem('activekey1')
    if (activekey) {
      let items1 = [...tabsData]
      items1.forEach((item) => {
        if (item.key == activekey) {
          item.flag = true
        }
        else {
          item.flag = false
        }
      })
      setTabsData(items1)
    }
  }, [])
  return (
    <div>
      <div>
        <Tabs
          defaultActiveKey={defaultActiveKey} onChange={onChange}>
          {
            tabsData.map((item: any, index: number) => {
              return <Tabs.TabPane key={index}
                tab={
                  <div className={style.icon_container} onMouseOver={() => mousemove(item)}>
                    <img src={item.flag ? item.hovericon : item.icon} className={style.icon_img} />
                    <span className={style.icon_label}>{item.title}</span>
                  </div>
                }
              >
              </Tabs.TabPane>
            })
          }
        </Tabs>
      </div>
      <div className={style.main_center}>
        {tabsData.map((tab: items, index: any) => (
          <div
            key={index}
            style={{
              display: keys == index ? 'block' : 'none',
            }}
          >
            {tab.content}
          </div>
        ))}
      </div>
    </div>
  )
}

export default Two
